<template>
	<view class="user_radar_invite box">
		<view class="manage_box box">
			<u-picker @confirm="bindPickerConfirm" @cancel="cancleLevelChoose"
				class="type_picker width_92 height_44 bc_fff br_8 mt_12 mr_10" :show="showLevel" :columns="levelList"
				keyName="label">
			</u-picker>
			<view class="invite_search_box" v-if="userType==2||userType==3">
				<uni-search-bar @input="refresherrefresh" radius="20" v-model="nickName" :placeholder="userType==2?'搜索导购名称':'输入店名或者导购名称'" cancelButton="none">
				</uni-search-bar>
			</view>
			<view class="member_header box w100 height_44 bc_fff fz_14 fc_333">
				<view class="header_left width_244" @click="datePickerChange(true)">
					<image src="../../static/images/calendar_icon.png" class="width_16 height_16 mr_5" mode="">
					</image>

					<view class="height_44 lh_44 time_value" v-if="params.beginTime &&params.endTime">
						{{params.beginTime}}-{{params.endTime}}
					</view>
					<view class="height_44 lh_44" v-else>
						邀请时间-邀请时间
					</view>
					<view class="close_icon" v-if="params.beginTime &&params.endTime" s>
						<u-icon class="" style="position: absolute;right: 10rpx;top: 10rpx" name="close" color="#333333"
							@click="clearTime"></u-icon>
					</view>


					<view class="date_picker_box height_44">
						<uni-datetime-picker @input="dateConfirm" @cancle="datetimeClose" clear-icon v-model="range"
							type="daterange" @change="dateConfirm" />
					</view>

				</view>
				<view class="header_right width_131" @click="cancleLevelChoose">
					{{params.levelLabel?params.levelLabel:"选择会员等级"}}
					<u-icon class="ml_5" name="arrow-down" color="#333333"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="scroll_container">
			<scroll-view class="scroll-view" :scroll-y="scroll" upper-threshold="0" :refresher-enabled="false"
				refresher-default-style="white" @scrolltoupper="refresherrefresh" lower-threshold="80"
				@scrolltolower="getDataList">
				<UserInvite v-if="userType==4"  :isRequest="isRequest" :dataList="dataList" :ossUrl="ossUrl" />
				<SalesInvite v-if="userType==1"  :isRequest="isRequest" :dataList="dataList" :ossUrl="ossUrl"/>
				<ManageInvite v-if="userType==2||userType==3" :userType="userType"  :isRequest="isRequest" :dataList="dataList" :ossUrl="ossUrl"/>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import UserInvite from "./merchant/components/userInvite.vue"
	import SalesInvite from "./merchant/components/salesInvite.vue"
	import ManageInvite from "./merchant/components/manageInvite.vue"
	import api from "@/service/config/api";
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			UserInvite,
			SalesInvite,
			ManageInvite
		},
		data() {
			return {
				scroll:true,
				nickName: "",
				isRequest: false,
				range: [new Date(), '2050-3-28'],
				ossUrl: this.$ossUrl,
				params: {
					beginTime: "",
					endTime: "",
					memberLevel: "",
					levelLabel: ""
				},
				startTime: "",
				endTime: "",
				levelList: [
					[{
						label: "普通会员",
						id: "1"
					}, {
						label: "尊享会员",
						id: "2"
					}, {
						label: "联盟会员",
						id: "3"
					}, {
						label: "创业会员",
						id: "4"
					}]
				],
				current: 1,
				size: 20,
				total: 0,
				dataList: [],
				dateList: [],
				showCalendar: false,
				showLevel: false,
				dateRange: [],
				showType:"",
				managerId:""
			}
		},
		computed: {
			...mapState(['userType']),
			placeholder(){
				return this.userType==2?'':''
			}
		},
		onLoad(options) {
			console.log("获取到掉的参数")
			console.log(options)
			if (options.time) {
				this.params.beginTime = options.time
				this.params.endTime = options.time
			}
			this.showType = options.showType||""
			this.managerId = options.managerId||""
			this.getDataList()

		},
		onShow() {
			uni.showToast({
				title:"加载中",
				icon:"none",
				duration:60000
			})
			if (this.userType != 4) {
				uni.setNavigationBarTitle({
					title: '会员信息'
				})
			}
		},
		methods: {
			clearTime() {
				this.params.beginTime = ""
				this.params.endTime = ""
				this.refresherrefresh()
			},
			// 下拉刷新
			refresherrefresh() {
				console.log("下拉刷新")
				this.current = 1
				this.getDataList()
			},
			bindPickerConfirm(e) {
				console.log(e)
				const value = e.value[0]
				const oldParams = JSON.parse(JSON.stringify(this.params))
				this.params.memberLevel = value.id
				this.params.levelLabel = value.label
				this.cancleLevelChoose()
				if (this.params.memberLevel != oldParams.memberLevel) {
					this.refresherrefresh()
				}
			},
			cancleLevelChoose() {
				this.showLevel = !this.showLevel
			},
			datePickerChange(value) {
				this.showCalendar = value
			},
			dateConfirm(e) {
				console.log("日期选择")
				console.log(e)
				if (e && e.length == 2) {
					console.log("参数修改")
					this.params.beginTime = e[0]
					this.params.endTime = e[1]
					const oldParams = JSON.parse(JSON.stringify(this.params))
					// if (this.params.beginTime != oldParams.beginTime || this.params.endTime != oldParams.endTime) {
					// 	this.refresherrefresh()
					// }
					this.refresherrefresh()
					this.datePickerChange(false)
					console.log("当前参数")
					console.log(this.params)
				} else {
					this.params.beginTime = ""
					this.params.endTime = ""
					uni.showToast({
						title: "请选择时间段"
					})
					return false
					this.datePickerChange(true)
				}

				// if (e.length >= 2) {
				// 	this.dateList = e
				// }

			},
			datetimeClose(e) {
				console.log("关闭日期选择")
				console.log(e)
			},
			//获取邀请列表
			getDataList() {
				const that = this
				const {
					beginTime,
					endTime,
					memberLevel
				} = this.params
				api.get("/user/api/radar/userPage", {
					beginTime,
					endTime,
					memberLevel,
					current: this.current,
					size: this.size,
					nickName:this.nickName,
					userId:this.managerId,
					userType:this.showType,
					// dealerId: uni.getStorageSync("tenantId")
				}).then(res => {
					uni.hideToast()
					console.log(res)
					setTimeout(() => {
						that.isRequest = true
					}, 0)
					if (res && res.code == 0) {
						const data = res.data.records
						this.total = res.data.total
						if (this.current == 1) {
							this.dataList = []
						}
						if (this.dataList.length < this.total) {
							this.dataList = this.dataList.concat(data)
							this.current++
						}
						console.log("父组件的数据")
						console.log(this.dataList)
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	// /deep/.uni-datetime-picker--btn{
	// 	opacity: 0;
	// }
	/deep/.uni-searchbar{
		padding: 0;
	}
	page{
		padding-bottom:38rpx;
	}
	.invite_search_box{
		background: #ffffff;
		@include set_padding(14rpx, 16rpx);
	}
	.date_confirm_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 999999;
		left: 30rpx;
		height: 80rpx;
		text-align: center;
		color: #ffffff;
		font-size: 28rpx;
		background-color: #007aff;
		border-radius: 200rpx;
		width: 690rpx;
		bottom: 40rpx;
		line-height: 80rpx;
	}

	/deep/.uni-date-editor--x {
		opacity: 0;
	}

	/deep/.icon-calendar {
		opacity: 0 !important;
	}

	/deep/.uni-date-x .icon-calendar {
		opacity: 0 !important;
	}

	/deep/.uni-date__x-input {
		opacity: 0;
	}

	/deep/.uni-date-x .range-separator {
		opacity: 0;
	}

	.user_radar_invite {
		height: 100vh;
		padding-bottom: 38rpx;

		.scroll_container {
			// height: calc(100vh - 56px);
			height: 100%;
			.scroll-view {
				// margin-bottom:38rpx;
				height: 100%;
			}
		}

		.manage_box {

			.search_box {
				@include set_padding(14rpx, 16rpx);
			}

			.member_header {

				@include flex_box(row, nowrap, space-between, center);

				.header_left {
					position: relative;
					overflow: hidden;
					@include set_padding(0rpx, 15rpx);
					@include flex_box(row, nowrap, center, center);

					// .time_value{
					// 	border: 1px solid green;
					// 	width: 100%;
					// 	position: relative;
					// }
					.close_icon {
						position: absolute;
						right: 10rpx;
						top: 10rpx;
						z-index: 9999999;
					}

					.date_picker_box {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						// opacity: 0.1;
						z-index: 10;

					}
				}

				.header_right {
					@include flex_box(row, nowrap, center, center);
					border-left: 1rpx solid rgba(0, 0, 0, 0.1);
					;
				}
			}

			.info_box {
				@include set_padding(0rpx, 12rpx);

				.info_view {
					@include flex_box(column, wrap, flex-start, flex-start);

					.name_box {
						@include flex_box(row, nowrap, space-between, center);
					}
				}

				.info_top {
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
					@include flex_box(row, nowrap, space-between, center);

					.top_left {
						@include flex_box(row, nowrap, flex-start, center);
					}
				}

				.bottom_left {
					@include flex_box(column, nowrap, flex-start, flex-end);

					.number {
						color: #FE5A1C;
					}
				}

				.info_bottom {
					@include flex_box(row, nowrap, space-between, center);



					.bottom_right {
						@include flex_box(row, nowrap, center, center);
					}
				}
			}
		}
	}
</style>